<template>
	<rui-card title="我的菜单">
		<view class="menu">
			<view class="item" v-for="(item, index) in list" :key="index" @click="change(item, index)">
				<uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
				<button class="share" plain="true" open-type="share" v-if="item.mode == 'share'">
					{{item.name}}
				</button>
				<view class="name" v-else>
					{{item.name}}
				</view>
				<view class="more">
					<uni-icons type="right" size="14" color="#bbb"></uni-icons>
				</view>
			</view>

		</view>
	</rui-card>
</template>

<script setup>
	import {
		ref
	} from "vue"

	let list = ref([
		// {
		// 	name: "发给好友",
		// 	icon: "redo-filled",
		// 	color: "#3d7eff",
		// 	mode: 'share',
		// 	path: "/pages/user/invite/invite",
		// 	phone: ''
		// }, 
		{
			name: "我的设置",
			icon: "gear-filled",
			color: "#3d7eff",
			mode: 'path',
			path: "/pages/user/seting/seting",
			phone: ''
		},
		// {
		// 	name: "功能建议",
		// 	icon: "help-filled",
		// 	color: "#3d7eff",
		// 	mode: 'path',
		// 	path: "/pages/user/feedback/feedback",
		// 	phone: ''
		// },
		{
			name: "技术服务",
			icon: "info-filled",
			color: "#3d7eff",
			mode: 'phone',
			path: "",
			phone: '15987136050'
		},

	])

	const emits = defineEmits(['change'])
	const change = (item, index) => {
		emits('change', item, index)
	}
</script>

<style lang="scss" scoped>
	.menu {
		.item {
			display: flex;
			align-items: center;
			position: relative;
			// padding: 15rpx 0;
			height: 80rpx;
			.share {
				border: none;
				box-shadow: none;
				background-color: transparent;
				font-size: 28rpx;
				margin-left: 10rpx;
				padding: 0;
				width: 100%;
				text-align: left;
			}

			.more {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translate(0%, -50%);
			}

			.name {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>